<template>
  <div class="container">
    <div>
      <div class="title-row font-22 font-color-6">创建活动</div>
      <div class="flex-left">
        <div class="panel">
          <div class="height-94 flex-left pad-l-20">
            <img :src="limitedTime" alt="" class="width-46 height-46">
            <div class="mar-l-20">
              <div class="font-18">限时秒杀</div>
              <div class="font-12 font-color-9">特定时间对指定商品进行秒杀</div>
            </div>
          </div>
          <div class="flex-between manage-row hight-46 font-color-6 font-16">
            <div class="width-150 height-46 flex-center" @click="handleCreate(0)">添加活动</div>
            <div class="width-1 height-36 bg-color-white"></div>
            <div class="width-150 height-46 flex-center" @click="clickActivityType('0')">管理</div>
          </div>
        </div>
        <div class="panel" v-if="this.getVersionType() !== '5'">
          <div class="height-94 flex-left pad-l-20">
            <img :src="freeShipping" alt="" class="width-46 height-46">
            <div class="mar-l-20">
              <div class="font-18">满额包邮</div>
              <div class="font-12 font-color-9">满足消费一定金额时对指定商品免邮费</div>
            </div>
          </div>
          <div class="flex-between manage-row hight-46 font-color-6 font-16">
            <div class="width-150 height-46 flex-center" @click="handleCreate(1)">添加活动</div>
            <div class="width-1 height-36 bg-color-white"></div>
            <div class="width-150 height-46 flex-center" @click="clickActivityType('1')">管理</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import limitedTime from '@/assets/images/limited-time.png'
import freeShipping from '@/assets/images/free-shipping.png'
export default {
  data() {
    return {
      limitedTime: limitedTime,
      freeShipping: freeShipping
    }
  },
  methods: {
    // 添加
    handleCreate(activityType) {
      // 秒杀
      if (activityType === 0) {
        this.$router.push({ path: '/sell-promotion/list-promotion/edit/index', query: { activityType: activityType }})
      }
      // 包邮
      if (activityType === 1) {
        this.$router.push({ path: '/sell-promotion/list-promotion/edit-fee/index', query: { activityType: activityType }})
      }
    },
    clickActivityType(activityType) {
      this.$router.push({ path: '/sell-promotion/list-promotion/index', query: { activityType: activityType }})
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  padding: 0 21px 0 48px;
  .flex-left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .title-row{
    margin-top: 44px;
    margin-bottom: 25px;
  }
  .panel{
    width: 300px;
    height: 140px;
    border-radius: 4px;
    background: white;
    margin-right: 36px;
    box-shadow:0px 3px 19px 0px rgba(154,154,154,0.18);
    img{
      border-radius: 50%;
    }
    .img-1{
      background: #dffffd;
    }
    .img-2{
      background: #eaf4ff;
    }
    .manage-row{
      background:rgba(247,247,247,1);
    }
  }
}
</style>
